<template>
  <div id="rongqi">
    <h1>父组件</h1>
   <Suspense>
       <template v-slot:default>
        <children></children>
       </template>
       <template v-slot:fallback>
       <h3>加载中。。。。</h3>
       </template>
   </Suspense>
  </div>
</template>

<script>
// import children from "./components/children.vue";//静态引入 同时出现
// 异步引入组件  父组件先出现   
import { defineAsyncComponent } from 'vue';
const children =defineAsyncComponent(()=>import("./components/children.vue"))
export default {
  name: "App",
  components: { children },
};
</script>

<style scoped>
#rongqi {
  padding: 10px;
  background-color: yellow;
}
</style>
